// <!-- Tab选项卡1 -->
//     <div class="box tab1">
//         <!-- 标题 -->
//         <ul>
//             <li class="active">1</li>
//             <li>2</li>
//             <li>3</li>
//         </ul>
//         <!-- 内容 -->
//         <ol>
//             <li class="active">1</li>
//             <li>2</li>
//             <li>3</li>
//         </ol>
//     </div>

/**
 * 创建一个Tab选项卡类
 * @param {*} el => tab选项卡的类名
 */
 function Tab(el) { // element 标签
    // that = this;
    // 构造函数中一般保存插件的属性
    this.tab = document.querySelector(el);
    this.hli = this.tab.querySelector("ul").querySelectorAll("li");
    this.cli = this.tab.querySelector("ol").querySelectorAll("li");
    // 默认启动
    this.init();
}
// 执行事件绑定
Tab.prototype.init = function() {
    for(let i = 0;i < this.hli.length; i++){
        this.hli[i].index = i;
        this.hli[i].onclick = this.changeOver.bind(this.hli[i],this);
    }
}
// 遍历清空类
Tab.prototype.clear = function() {
    for(let i = 0; i < this.cli.length; i++){
        this.cli[i].className = "";
        this.hli[i].className = "";
    }
}
//点击切换函数
Tab.prototype.changeOver = function(that) {
    that.clear();
    this.className = "active";
    that.cli[this.index].className = "active";
}

// const tab1 = new Tab(".box1")
export default Tab;
